<template>
  <div>
    <table>
      <li v-for="a in sdate">
        <p>姓名：{{ a.name }}</p>
        <p>年龄：{{ a.age }}</p>
      </li>
    </table>
    <br />
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>用户借款编号</td>
          <td>借款用户账号</td>
          <td>借款款项名称</td>
          <td>借款金额</td>
          <td>剩余还款本金</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="b in list">
          <td>{{ b.a }}</td>
          <td>{{ b.b }}</td>
          <td>{{ b.c }}</td>
          <td>{{ b.d }}</td>
          <td>{{ b.e }}</td>
        </tr>
      </tbody>
    </table>
    <input type="text" v-model="test" />
    <p>{{ test }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';

let data = reactive({
  sdate: [
    {
      name: '张大',
      age: '21',
    },
    {
      name: '李尔',
      age: '21',
    },
    {
      name: '刘珊',
      age: '21',
    },
    {
      name: '千思',
      age: '21',
    },
    {
      name: '赵武',
      age: '21',
    },
  ],
  list: [
    { a: '1', b: 'zhangsan', c: '八维助学金额', d: '400', e: '0' },
    { a: '2', b: 'zhangsan', c: '八维助学金额', d: '10000', e: '10000' },
  ],
  test: '双向绑定',
});

let { sdate, list, test } = toRefs(data);
</script>

<style scoped></style>
